<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios';

defineProps<{ msg: string }>()

const count = ref(0)

const r_txt = ref("")
const loading = ref(false);

function to_func1() {

  return alert("123")

}

// 提交表单
const to_func = async () => {
  loading.value = true;

  try {
    const response = await axios.post('/capability/simple_by_vue/methods/function1',  {
        "name": "John Doe",
    });
    console.log('数据发送成功:', response.data);

    // 可以弹出提示（DevUI 也提供 d-message）
    alert('提交成功！');
  } catch (error) {
    console.error('发送失败:', error);
    alert('提交失败，请检查网络或输入');
  } finally {
    loading.value = false;
  }
};

</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>

  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
     <!-- 使用 Button 组件 -->
    <d-button @click="to_func()">通信方法</d-button>
    <p class="read-the-docs">返回值:</p>
    <p class="read-the-docs">{{ r_txt }}</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
